<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>增删改查</title>
    <style>
        *{
            margin: 0;
            padding: 0;
            list-style: none;
        }
        p{
            height: 40px;
        }
        table{
            width: 600px;
            border-collapse: collapse;
            margin-top: 10px;
        }
        td,th{
            border: 1px solid #cccccc;
            padding: 2px 5px;
            text-align: center;
        }
        #mask{
            width: 100vw;
            height: 100vh;
            background-color: rgba(32, 178, 171, 0.329);
            position: absolute;
            z-index: 1;
            top: 0;
            display: none;
        }
        #edit{
            width: 300px;
            height: 260px;
            border: 1px solid #cccccc;
            padding: 20px;
            background: lightgrey;
            margin: 100px auto;
        }
        .show{
            display:inline-block;
        }
        .noshow{
            display: none;
        }
    </style>
</head>
<body>
    <button id="add">添加</button>
    <table>
        <thead>
            <tr>
                <th>学号</th>
                <th>姓名</th>
                <th>性别</th>
                <th>年龄</th>
                <th>成绩</th>
                <th>操作</th>
            </tr>
        </thead>
        <tbody>
        </tbody>
    </table>
    <div id="mask">
        <div id="edit">
            <p>学号：<input type="text" id="no"></p>
            <p>姓名：<input type="text" id="name"></p>
            <p>性别：<input type="radio" checked name="gender" class="gender" value="男">男
                <input type="radio" name="gender" class="gender" value="女">女</p>
            <p>年龄：<input type="text" id="age"></p>
            <p>成绩：<input type="text" id="score"></p>
            <p>
                <button id="addStu" class="show">添加</button>
                <button id="updateStu" class="noshow">修改</button>
                <button id="cancel">取消</button>
            </p>
        </div>
    </div>
    <script>
        //封装一个创建元素的方法
        function c(val){
            return document.createElement(val)
        }

        let data = [{
            no:'1001',
            name:'鹿晗',
            gender:'男',
            age:30,
            score:88
        },{
            no:'1002',
            name:'关晓彤',
            gender:'女',
            age:22,
            score:92
        }];
        //获取tbody对象
        let tbody = document.querySelector("tbody")
        //获取添加按钮对象
        let add = document.querySelector("#add")
        //获取 添加学生按钮对象
        let addStu = document.querySelector("#addStu")
        //获取 修改学生按钮对象
        let upateStu = document.querySelector("#updateStu")
        //获取 学习按钮对象
        let cancel = document.querySelector("#cancel")
        //获取添加蒙版
        let mask = document.querySelector("#mask")

        //获取表单元素对象
        let no = document.querySelector("#no")
        let name = document.querySelector("#name")
        let genders = document.querySelectorAll(".gender")
        let age = document.querySelector("#age")
        let score = document.querySelector("#score")

        upateStu.onclick = function(){
            //根据学号，找到学生对象
            let stu = data.find(function(item){
                return item.no===no.value
            })
            stu.name = name.value;
            stu.age = age.value
            stu.score = score.value
            stu.gender = genders[0].checked===true?"男":"女"
            alert("修改成功！")
            //清空表单数据
            clearText()
            //重新显示最新的数据
            loadData()
        }

        //添加学生按钮点击事件
        addStu.onclick = function(){
            let stu = {
                no:no.value,
                name:name.value,
                gender:genders[0].checked===true?genders[0].value:genders[1].value,
                age:age.value,
                score:score.value
            }
            //向数组中添加学生
            data.push(stu)
            alert("添加成功！")
            //调用清空方法
            clearText()
            //重新显示最新的数据
            loadData()
        }

        //取消按钮点击事件
        cancel.onclick = function(){
            mask.style.display = "none"
            //清空表单数据
            clearText()
        }

        //添加按钮点击事件
        add.onclick = function(){
            mask.style.display = "block"
        }

        //清空文本框
        function clearText(){

            //显示修改按钮，隐藏添加按钮
            addStu.classList.remove("noshow")
            addStu.classList.add("show")
            updateStu.classList.remove("show")
            updateStu.classList.add("noshow")

            no.readOnly = false
            no.value = ""
            name.value = ""
            age.value = ""
            score.value = ""
            genders[0].checked = true;
        }

        //加载方法
        function loadData(){
            tbody.innerHTML = ""
            data.forEach(function(item){
                let tr = c("tr")
                let td1 = c("td")
                td1.innerHTML = item.no
                let td2 = c("td")
                td2.innerHTML = item.name
                let td3 = c("td")
                td3.innerHTML = item.gender
                let td4 = c("td")
                td4.innerHTML = item.age
                let td5 = c("td")
                td5.innerHTML = item.score
                let td6 = c("td")
                let btn1 = c("button")
                btn1.innerHTML = "修改"
                btn1.onclick = function(){
                    //显示蒙蔽
                    mask.style.display = "block"
                    getStudentByNo(item.no)
                }
                let btn2 = c("button")
                btn2.innerHTML = "删除"
                btn2.onclick = function(){
                    delStudentByNo(item.no)
                }
                td6.appendChild(btn1)
                td6.appendChild(btn2)
                tr.appendChild(td1)
                tr.appendChild(td2)
                tr.appendChild(td3)
                tr.appendChild(td4)
                tr.appendChild(td5)
                tr.appendChild(td6)
                tbody.appendChild(tr)
            })
        }


        //根据学号，删除学生
        function delStudentByNo(no){
            let index = data.findIndex(function(item){
                return item.no===no
            })
            if(index>=0){
                data.splice(index,1)
                alert("删除成功！")
                //重新显示最新的数据
                loadData()
            }else{
                alert("获取不到学生信息！")
            }
        }
        //根据学号，返回学生信息
        function getStudentByNo(no){
            let stu = data.find(function(item){
                return item.no===no
            })
            if(stu){
                //显示修改按钮，隐藏添加按钮
                addStu.classList.remove("show")
                addStu.classList.add("noshow")
                updateStu.classList.remove("noshow")
                updateStu.classList.add("show")

                this.no.value = stu.no
                this.no.readOnly = true
                name.value = stu.name
                age.value = stu.age
                score.value = stu.score
                if(stu.gender==="男"){
                    genders[0].checked = true
                }else{
                    genders[1].checked = true
                }
            }else{
                alert("获取不到学生信息！")
            }
        }


        //加载数据
        loadData();
       
    </script>
</body>
</html>